<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"%>
<%@page import="db.mysql.mySqlUtils"%>
<%
request.setCharacterEncoding("utf8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<script src="/Goomi/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="/Goomi/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Goomi/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/Goomi/css/jquery-ui-1.8.15.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/Goomi/css/ui.jqgrid.css" />
<title>Setting</title>
<script type="text/javascript">
var data;
var tab = '`order`';
function getOrder(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.order.orderService&method=getOrder&para=" + "all" ;
		$.getJSON(url, 
			function(json){
				data = json;
				loadGrid();
		});
	}catch(e){
		alert(e);
	}
}

function deleteId(id){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?action=edit&oper=delete&table=" + tab + "&id=" + id ;
		$.getJSON(url, 
			function(json){
//OK
		});
	}catch(e){
		alert(e);
	}
}


var lastSelect;
function loadGrid(){
    jQuery("#dataGrid").jqGrid({
      datatype: "local",
      height: 250,
      colNames:['db_id','狀態','商品名稱', '顏色', '大小', '備註',"url"],
      colModel:[
		//{name:'id',index:'id', width:60, sorttype:"int",hidden:false},
        {name:'db_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'status',index:'status', width:90,editable:true,edittype:"select",editoptions:{value:"new:new;in process:in process;paying:paying;complete:complete;reject:reject"}},
        {name:'goods_id',index:'goods_id', width:90,editable:true},
        {name:'color_id',index:'color_id', width:90,editable:true},
        {name:'size_id',index:'size_id', width:90,editable:true},
        {name:'remark',remark:'remark', width:100,editable:true},
        {name:'url',remark:'url', width:100,editable:true}
        
      ],
      //multiselect: true,
      onSelectRow: function(id){
  		if(id && id !== lastSelect){
  			if(lastSelect){
  				jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
  			}
  			jQuery('#dataGrid').jqGrid('restoreRow',lastSelect);
  			jQuery('#dataGrid').jqGrid('editRow',id,true);
  			lastSelect=id;
  		}
  	},
  	editurl: "/Goomi/Ajax.template?action=edit&table=" + tab,
      caption: "商品類別"
    });  // jqGrid
 
    for(var i=0;i <= data.length;i++)
      jQuery("#dataGrid").jqGrid('addRowData',i+1,data[i]);
}


function checksave(result) {
	if (result.responseText=="") {alert("Update is missing!"); return false;}
	return true;
}

$(document).ready(function() {
	getOrder();
	$("#add").click(function(){
		jQuery("#dataGrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
	});
	$("#delete").click(function(){
		var gr = jQuery("#dataGrid").jqGrid('getGridParam','selrow');
		if( gr != null ){
			//alert(gr + ":"  + jQuery("#dataGrid").getLocalRow(gr).db_id);
			deleteId(jQuery("#dataGrid").getLocalRow(gr).db_id);
			jQuery("#dataGrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
		}
		else alert("Please Select Row to delete!");
	});
	$("#save").click(function(){
		var gr = jQuery("#dataGrid").jqGrid('getGridParam','selrow');
		if( gr != null ) jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
		else alert("Please Select Row to edit!");
	});
	
	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
});
</script>
</head>
<body>
<table id="dataGrid"><tbody></tbody></table>
<input type="BUTTON" id="save" value="Save" /> <input type="BUTTON" id="add" value="Add" /> <input type="BUTTON" id="delete" value="Delete Selected" />
</body>
</html>
 